텍스트영역 리사이즈 컴포넌트 :: 에이젝스 일반[SSISO Community]
 
SSISO 카페 SSISO Source SSISO 구직 SSISO 쇼핑몰 SSISO 맛집
추천검색어 : JUnit   Log4j   ajax   spring   struts   struts-config.xml   Synchronized   책정보   Ajax 마스터하기   우측부분

에이젝스 일반
[1]
등록일:2008-04-02 14:04:19 (0%)
작성자:
제목:텍스트영역 리사이즈 컴포넌트
Richard McMahon씨는 Prototype을 이용한 "ResizingTextArea" 컴포넌트를 만들고 공개했다. 이 컴포넌트는 클릭(click)과 키업(keyup)이벤트를 할당하여 텍스트 영역의 Row를 감시하고 실시간으로 리사이즈 한다. 이 블로그의 댓글과 방명록 텍스트 영역에 적용해 보았다.(썩 쓸만함)

var ResizingTextArea = Class.create();
ResizingTextArea.prototype = {
    defaultRows: 1,
    initialize: function(field) {
        this.defaultRows = Math.max(field.rows, 1);
        this.resizeNeeded = this.resizeNeeded.bindAsEventListener(this);
        Event.observe(field, "click", this.resizeNeeded);
        Event.observe(field, "keyup", this.resizeNeeded);
    },
    resizeNeeded: function(Event) {
        var t = Event.element(Event);
        var lines = t.value.split('\n');
        var newRows = lines.length + 1;
        var oldRows = t.rows;
        for (var i = 0; i < lines.length; i++) {
            var line = lines[i];
            if (line.length >= t.cols) newRows += Math.floor(line.length / t.cols);
        }
        if (newRows > t.rows) t.rows = newRows;
        if (newRows < t.rows) t.rows = Math.max(this.defaultRows, newRows);
    }
}

사용법 : <textarea ... onfocus="new ResizingTextArea(this);">

 

 

출처 : FireJune´s


[본문링크] 텍스트영역 리사이즈 컴포넌트
[1]
코멘트(이글의 트랙백 주소:/cafe/tb_receive.php?no=7053
작성자
비밀번호

 

SSISOCommunity

[이전]

Copyright byCopyright ⓒ2005, SSISO Community All Rights Reserved.